<style scoped >
    .edi .center .ivu-form-item .ivu-form-item-content .ivu-input-wrapper{width: 90%;}
    .edi .center .ivu-form-item .ivu-form-item-content .ivu-date-picker{width: 90%;display: inline-block;}
    /*导入*/
    .tendwaybill .ivu-upload{display: inline-block;}
    .tendwaybill .tendbutton{width: 80px;color: #7a7676;background-color: #ffffff;margin-bottom: 12px;}
    .tendwaybill .tendbutton:hover{color: #37b3b3;border:1px solid #37b3b3;}
    .importbody .ivu-row .ivu-col .ivu-upload{  display: inline-block;}
    .conversionbody .ivu-row .ivu-col .ivu-upload{  display: inline-block;}
</style>
<template>
    <div class="console-product">
        <Row class="position">
            <i-col :xs="12" :sm="10" :md="8" :lg="6" >
                <div class="ivu-breadcrumb">
                    <span class="ivu-breadcrumb-item-link">当前位置：</span>
                    <span class="ivu-breadcrumb-item-link">TMW管理</span>
                    <span class="ivu-breadcrumb-item-separator">/</span>
                    <span class="ivu-breadcrumb-item-link">EDI管理</span>
                </div>
            </i-col>
            <i-col class="fr">
            <span>
                    <Button @click="importorder"><i class="iconfont cofont icon-daoru"></i> 导入回款信息</Button>
                    <Modal class-name="popup" class="import" v-model="importModal" :mask-closable="false" width="275">
                        <p slot="header" style="color: #eeebeb;"  v-drag>
                            <span>导入</span>
                        </p>
                        <div class="importbody" style="height: 170px;">
                            <Row>
                                <i-col>
                                    <label style="display:inline-block;width: 45px">导入：</label>
                                    <Upload :action="actionupload" :headers="uploadHeader" :format="['xls','xlsx']" :on-format-error="handleFormatError" :on-progress="uploadprogress"  :on-success="uploadSuccess" :on-error="uploadError" :default-file-list="fileList">
                                        <Button class="tendbutton" type="ghost">浏览...</Button>
                                    </Upload>
                                </i-col>
                            </Row>
                            <span>备注:只能导入Excel表格，包含.xls和xlsx类型</span>
                        </div>
                        <div slot="footer"></div>
                    </Modal>
                </span>
            </i-col>
            <!--<i-col class="fr">
                <span>
                    <Button @click="addEDI"><i class="iconfont cofont">&#xe649;</i> 新增订单</Button>
                    <Modal class-name="popup" class="edi" v-model="ediModal" width="400" @on-cancel="cancelEdiOrder" :mask-closable="false">
                        <p slot="header" style="color: #eeebeb;">
                            <span v-if="addEdi">新增</span>
                            <span v-if="editorEdi">编辑</span>
                        </p>
                        <div v-if="addEdi" class="center">
                            <Form  ref="addEdiValidate" :model="addEdiValidate" :rules="ruleEdi" label-position="left" :label-width="70">
                                <input type="hidden" name="id" v-model="addEdiValidate.id">
                                <Form-item label="订单号:" prop="ordernos">
                                    <Input v-model="addEdiValidate.ordernos"></Input>
                                </Form-item>
                                <Form-item label="PO号:" prop="pono">
                                    <Input v-model="addEdiValidate.pono"></Input>
                                </Form-item>
                                <Form-item label="产品类型:" prop="productname">
                                    <Input v-model="addEdiValidate.productname"></Input>
                                </Form-item>
                                <Form-item label="发货日期:" prop="shipdate">
                                    <Date-picker type="date" v-model="addEdiValidate.shipdate"></Date-picker>
                                </Form-item>
                            </Form>
                        </div>
                        <div v-if="editorEdi" class="center">
                            <Form  ref="editEdiValidate" :model="editEdiValidate" label-position="left" :label-width="70">
                                <input type="hidden" name="id" v-model="editEdiValidate.id">
                                <Form-item label="订单号:" prop="ordernos">
                                    <Input disabled="disabled" v-model="editEdiValidate.ordernos"></Input>
                                </Form-item>
                                <Form-item label="PO号:" prop="pono">
                                    <Input disabled="disabled" v-model="editEdiValidate.pono"></Input>
                                </Form-item>
                                <Form-item label="回款日期:" prop="huikuantime">
                                     <Date-picker type="date" v-model="editEdiValidate.huikuantime"></Date-picker>
                                </Form-item>
                                <Form-item label="金额:" prop="money">
                                    <Input v-model="editEdiValidate.money"></Input>
                                </Form-item>
                            </Form>
                        </div>
                        <div slot="footer">
                            <div class="footer">
                                <Button v-if="addEdi" class="save" :loading="modal_loading" @click="addEdiOrder('ediValidate')">添加</Button>
                                <Button v-if="editorEdi" class="save" :loading="modal_loading" @click="saveEdiOrder('ediValidate')">保存</Button>
                            </div>
                        </div>
                    </Modal>
                </span>
                <span>
                    <Button @click="importorder"><i class="iconfont cofont">&#xe649;</i> 导入</Button>
                    <Modal class-name="popup" class="import" v-model="importModal" :mask-closable="false" width="275">
                        <p slot="header" style="color: #eeebeb;">
                            <span>导入</span>
                        </p>
                        <div class="importbody" style="height: 170px;">
                            <Row>
                                <i-col>
                                    <label style="display:inline-block;width: 45px">导入：</label>
                                    <Upload multiple action="">
                                        <Button class="tendbutton" type="ghost">浏览</Button>
                                    </Upload>
                                </i-col>
                            </Row>
                            <span>备注:只能导入Excel表格，包含.xls和xlse类型</span>
                        </div>
                        <div slot="footer"></div>
                    </Modal>
                </span>
                <span>
                    <Button @click="exportorder"><i class="iconfont cofont">&#xe649;</i> 导出</Button>
                </span>
                <span>
                    <Button @click="conversion"><i class="iconfont cofont">&#xe649;</i> PO转Order</Button>
                    <Modal class-name="popup" class="conversion" v-model="conversionModal" :mask-closable="false" width="275">
                        <p slot="header" style="color: #eeebeb;">
                            <span>PO转Order</span>
                        </p>
                        <div  class="conversionbody" style="height: 170px;">
                            <Row>
                                <i-col>
                                    <label style="display:inline-block;width: 45px">导入：</label>
                                    <Upload multiple action="">
                                        <Button class="tendbutton" type="ghost">浏览</Button>
                                    </Upload>
                                </i-col>
                            </Row>
                            <span>备注:只能导入Excel表格，包含.xls和xlse类型</span>
                        </div>
                        <div slot="footer"></div>
                    </Modal>
                </span>
            </i-col>-->
        </Row>

        <div class="console-product-contcent" id="contcentHeight" :style="{height:height +'px'}">
            <Form class="searchform" ref="ediForm" :model="ediForm" inline>
                <Form-item label="物流单号:" :label-width="65" style="width: 190px">
                    <Input v-model="ediForm.code" @on-enter="ediSearch"></Input>
                </Form-item>
                <Form-item label="订单号:" :label-width="50" style="width: 175px">
                    <Input v-model="ediForm.orderid" @on-enter="ediSearch"></Input>
                </Form-item>
                <Form-item label="PO号:" :label-width="45" style="width: 175px">
                    <Input v-model="ediForm.pono" @on-enter="ediSearch"></Input>
                </Form-item>
                <Form-item label="发货日期:" :label-width="65" style="width: 265px">
                    <Date-picker type="daterange" v-model="ediForm.shipdate"  :options="shipDate0ptions" style="width: 200px"></Date-picker>
                </Form-item>
                <Form-item label="状态:" :label-width="35" style="width: 120px">
                    <Select v-model="ediForm.status">
                        <Option v-for="item in statusList" :value="item.value" :key="item">{{ item.label }}</Option>
                    </Select>
                </Form-item>
                <Form-item>
                    <Button class="search" @click="ediSearch">搜索</Button>
                </Form-item>
            </Form>
            <Loading v-if="spinShow"></Loading>
            <Table v-if="tableShow" stripe border :columns="ediColumns" ref="ediData" :data="ediData"></Table>
            <!--<Modal v-model="delModal" class-name="delect" width="250" @on-cancel="delCancel" :mask-closable="false">
                <p slot="header" style="color: #eeebeb">
                    <span>提示框</span>
                </p>
                <p class="delbody">
                    <i class="iconfont" style="color: #f76165;font-size: 16px;">&#xe615</i>&nbsp;&nbsp;确认删除？
                        </p>
                <div slot="footer">
                    <div class="footer">
                        <Button class="clear" @click="delCancel">取消</Button>
                        <Button  class="save" :loading="delLoading" @click="delOK">确认</Button>
                    </div>
                </div>
            </Modal>-->
        </div>
        <Row style="background-color: #ffffff;margin-top: 1px;">
            <Col>
            <div v-if="tableShow" class="tablepage clearfix">
                <div class="fl">
                    <span>共</span>
                    <span class="num">{{total}}</span>
                    <span>条记录</span>
                    <span>{{currentPage}}/{{pageTotal}}页</span>
                </div>
                <div class="fr">
                    <Page :total="total" :page-size="pageSize" :current="currentPage" placement="top" show-elevator show-sizer @on-change="changePage" @on-page-size-change="changeSize"></Page>
                </div>
            </div>
            </Col>
        </Row>
    </div>
</template>
<script>
    // 导入要用到的子组件
    import Loading from '../../components/loading'
    export default {
        data () {
            return {
                disabled:false,
                modal_loading: false,
                delLoading:false,
                total: 0,//总条数
                currentPage: 1,//当前页
                pageTotal: 1,//总页数
                pageSize: 10,//默认每页显示数量
                height: 1000,//表单高度
                spinShow:false,
                tableShow:false,
                delModal:false,//删除
                ediModal:false,//新增订单弹窗
                addEdi:false,
                editorEdi:false,
                actionupload:this.$store.state.url+'/uploadPaymentFile',
                uploadHeader:{Authorization : "Bearer "+localStorage.getItem('token')},
                fileList:[],
                val:'100',
                ediForm:{//条件搜索
                    code:'',
                    orderid:'',
                    pono:'',
                    shipdate:[new Date().getTime() - 3600 * 1000 * 24 * 7,new Date()],
                    status:' '
                },
                statusList: [
                    {
                        value: ' ',
                        label: '全部'
                    },
                    {
                        value: '1',
                        label: '已发送'
                    },
                    {
                        value: '0',
                        label: '未发送'
                    },
                    {
                        value: '2',
                        label: '已成功'
                    },
                    {
                        value: '3',
                        label: '失败'
                    }
                ],
                shipDate0ptions: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近一个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近三个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                return [start, end];
                            }
                        }
                    ]
                },
                ediData:[],//edi数据
                //edi格式
                ediColumns:[
                    {
                        width:'3%',
                        title: '序号',
                        type:'index'
                    },
                    {
                        width:'12%',
                        title: '物流单号',
                        key:'code',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.code,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.code)]);
                        }
                    },
                    {
                        width:'8%',
                        title: '订单号',
                        key:'orderid',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.orderid,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.orderid)]);
                        }
                    },
                    {
                        width:'8%',
                        title: 'PO号',
                        key:'pono',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.pono,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.pono)]);
                        }
                    },
                    {
                        width:'8%',
                        title: '产品类型',
                        key:'productname',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.productname,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.productname)]);
                        }
                    },
                    {
                        width:'12%',
                        title: '发货日期',
                        key:'shipdate',
                        render: (h, params) => {
                            const text = params.row.shipdate != null ? new Date(params.row.shipdate).format('yyyy-MM-dd') : "";
                            return h('Tooltip', {
                                props: {
                                    content: text,
                                    placement:"bottom-start"
                                }
                            }, [h('span', text)]);
                        }
                    },
                    {
                        width:'12%',
                        title: '发送日期',
                        key:'edisendtime',
                        render: (h, params) => {
                            const text = params.row.edisendtime != null ? new Date(params.row.edisendtime).format('yyyy-MM-dd') : "";
                            return h('Tooltip', {
                                props: {
                                    content: text,
                                    placement:"bottom-start"
                                }
                            }, [h('span', text)]);
                        }
                    },
                    {
                        width:'6%',
                        title: '发送结果',
                        key:'status',
                        render: (h, params) => {
                            var text = params.row.status == "0" ? '未发送' : params.row.status == "1" ? '已发送' : params.row.status == "2" ? '已成功' : params.row.status == "3" ? '失败' : '';
                            return h('Tooltip', {
                                props: {
                                    content: text,
                                    placement:"bottom-start"
                                }
                            }, [h('span', text)]);
                        }
                    },
                    {
                        width:'6%',
                        title: '未发送原因',
                        key:'edierrorinfo',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.edierrorinfo,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.edierrorinfo)]);
                        }
                    },
                    {
                        width:'12%',
                        title: '回款日期',
                        key:'huikuantime',
                        render: (h, params) => {
                            const text = params.row.huikuantime != null ? new Date(params.row.huikuantime).format('yyyy-MM-dd') : "";
                            return h('Tooltip', {
                                props: {
                                    content: text,
                                    placement:"bottom-start"
                                }
                            }, [h('span', text)]);
                        }
                    },
                    {
                        width:'8%',
                        title: '金额(美元)',
                        key:'money',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.money,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.money)]);
                        }
                    },
                    {
                        width:'10%',
                        title: '操作',
                        key:'id',
                        render: (h, params) => {
                            return h('div', [
                                params.row.status == "1" || params.row.status == "2" ? "" :  h('Button',
                                    {
                                        class:"green",
                                        on: {
                                            click: () => {
                                                this.sendEDI(params.row.id)
                                            }
                                        }
                                    },
                                    [
                                        h('i', {
                                            class : 'iconfont icon-88'
                                        }),
                                        h("span",'补发edi')
                                    ])
                                /*h('Button',
                                    {
                                        class:"red",
                                        on: {
                                            click: () => {
                                                this.remove(params.row.id)
                                            }
                                        }
                                    },
                                    [
                                        h('i', {
                                            class : 'iconfont icon-qingkong'
                                        }),
                                        h("span",'删除')
                                    ]),
                                h('Button',
                                    {
                                        class:"blue",
                                        on: {
                                            click: () => {
                                                this.editEDI(params.row)
                                            }
                                        }
                                    },
                                    [
                                        h('i', {
                                            class : 'iconfont icon-bianji'
                                        }),
                                        h("span",'编辑')
                                    ])*/
                            ]);
                        }
                    }
                ],
                //订单数据
                addEdiValidate:{
                    orderid:'',
                    pono:'',
                    productname:'',
                    shipdate:''
                },
                editEdiValidate:{
                    orderid:'',
                    pono:'',
                    huikuantime:'',
                    money:''
                },
                ruleEdi:{
                    orderid: [
                        {required: true, message: '请输入订单号', trigger: 'blur'}
                    ],
                    pono: [
                        {required: true, message: '请输入PO号', trigger: 'blur'}
                    ],
                    productname: [
                        {required: true, message: '请输入产品类型', trigger: 'blur'}
                    ],
                    shipdate: [
                        {required: true, message: '请输入发货日期', trigger: 'blur'}
                    ]
                },
                resendValidate:{
                    code:''
                },
                importModal:false,//导入
                conversionModal:false,//PO转Order
            }
        },
        //所需子组件
        components: {
            Loading
        },
        created:function(){
            var width = window.innerWidth;
            if(width >1600){
                this.height=window.innerHeight-200;
            }else if(width > 1440 && width <=1600){
                this.height=window.innerHeight-180;
            }else if(width > 1366 && width <=1440){
                this.height=window.innerHeight-172;
            }else if(width > 1280 && width <=1366){
                this.height=window.innerHeight-166;
            }else if(width > 1024 && width <=1280){
                this.height=window.innerHeight-162;
            }else{
                this.height=window.innerHeight-151;
            }
            if(window.innerWidth > 1600){
                this.pageSize = 20;
            }
            this.ediData = this.ediTableData(this.ediForm,this.currentPage,this.pageSize)
        },
        mounted() {
        },
        methods: {
            //查询物流数据，条件，当前页，每页显示多少条
            ediTableData (formData,currentPage,pageSize) {
                this.spinShow=true;
                this.tableShow = false;
                var code = formData.code;//物流单号
                var orderid = formData.orderid;//订单号
                var pono = formData.pono;//运单号
                var status = formData.status.replace(/(^\s+)|(\s+$)/g, "");//状态
                var fromDate = '';//开始时间
                var toDate = '';//结束时间
                if(formData.shipdate.length != 0  && formData.shipdate[0] != null && formData.shipdate[1] != null && formData.shipdate[0] != "" && formData.shipdate[1] != ""){
                    var fromDateTime = (new Date(formData.shipdate[0])).getTime();
                    fromDate = new Date(fromDateTime).format("yyyy-MM-dd");
                    var toDateTime = (new Date(formData.shipdate[1])).getTime();
                    toDate = new Date(toDateTime).format("yyyy-MM-dd");
                }
                let data = {
                    params: {
                        pageIndex : currentPage,
                        pageSize : pageSize,
                        code : code,
                        orderid : orderid,
                        pono : pono,
                        status : status,
                        fromDate : fromDate,
                        toDate : toDate
                    }
                };
                axios.get('/edis',data).then(res => {
                    this.total=res.data.total;
                    this.pageTotal=Math.ceil(res.data.total / pageSize);
                    this.ediData = res.data.data;
                    this.spinShow=false;
                    this.tableShow = true;
                }).catch(err =>{
                })
            },
            //条件查询
            ediSearch(){
                this.currentPage = 1;
                this.ediData = this.ediTableData(this.ediForm,this.currentPage,this.pageSize)
            },
            //改变页数
            changePage: function (page) {
                this.currentPage=page;
                this.ediData = this.ediTableData(this.ediForm,this.currentPage,this.pageSize)
            },
            //改变每页显示多少条
            changeSize: function (pageSize) {
                this.currentPage=1;
                this.pageSize = pageSize;
                this.pageTotal=Math.ceil(this.total / this.pageSize);
                this.ediData = this.ediTableData(this.ediForm,this.currentPage,this.pageSize)
            },
            //条件查询
            ediSearch(){
                this.currentPage = 1;
                this.ediData = this.ediTableData(this.ediForm,this.currentPage,this.pageSize)
            },
           /* //根据ID删除清单列表
            remove(column){
                this.delModal=true;
                this.delId = column;
            },
            delOK(column){
                this.delLoading = true;
                this.declData.splice(column, 1);
            },
            delCancel() {
                this.delModal=false;
                this.delId = '';
            },
            //新增订单
            addEDI() {
                this.ediModal=true;
                this.addEdi=true;
                this.editorEdi=false;
            },
            //保存新增订单
            addEdiOrder (name) {
                this.modal_loading = true;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        setTimeout(() => {
                            this.modal_loading = false;
                            this.ediModal = false;
                            this.addEdi = false;
                            this.$Message.success('添加成功');
                        }, 2000);
                    } else {
                        this.modal_loading = false;
                    }
                });
            },
            //编辑订单
            editEDI() {
                this.ediModal=true;
                this.addEdi=false;
                this.editorEdi=true;
            },
            //保存编辑订单
            saveEdiOrder(name) {
                this.modal_loading = true;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        setTimeout(() => {
                            this.modal_loading = false;
                            this.ediModal = false;
                            this.editorEdi = false;
                            this.$Message.success('添加成功');
                        }, 2000);
                    } else {
                        this.modal_loading = false;
                    }
                });
            },
            //取消新增订单弹窗
            cancelEdiOrder() {
                this.ediModal = false;
                this.addEdi = false;
                this.editorEdi = false;
                this.disabled = false;
                this.addEdiValidate = {
                    orderid:'',
                    pono:'',
                    productname:'',
                    shipdate:''
                };
                this.editEdiValidate = {
                    orderid:'',
                    pono:'',
                    huikuantime:'',
                    money:''
                };
            },
            //导入
            importorder() {
                this.importModal=true;
            },
            //导出
            exportorder() {

            },
            //PO转Order
            conversion() {
                this.conversionModal=true;
            },*/
            //导入
            importorder() {
                this.importModal=true;
            },
            handleFormatError(file){
                this.$Message.error('文件 ' + file.name + ' 格式不正确，请上传 xls 或 xlsx 格式。');
            },
            uploadSuccess(file){
                this.$Message.destroy();
                this.$Message.success('文件上传成功。');
                this.importModal = false;
                this.fileList=[];
                this.ediData = this.ediTableData(this.ediForm,this.currentPage,this.pageSize)
            },
            uploadError(error,file,fileList){
                this.$Message.destroy();
                this.$Message.error(file);
                this.fileList=[];
            },
            uploadprogress(file){
                this.$Message.loading({
                    content: '文件正在上传，请稍后......',
                    duration: 0
                });

            },
            sendEDI(id){
                this.$Message.loading({
                    content: '正在补发，请稍后......',
                    duration: 0
                });
                axios.get('/edi/'+id+'/send').then(res => {
                    this.$Message.destroy();
                    this.$Message.success('补发成功');
                    this.ediData = this.ediTableData(this.ediForm,this.currentPage,this.pageSize);
                }).catch(err =>{
                    this.$Message.destroy();
                    this.$Message.error({content: err,duration: 0,closable:true});
                })
            },
        }
    }
</script>